<?php
include_once 'PHP/autoinclude.php';
$database=new Database();
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="JavaScript/ArtistList.js"></script>
<script type="text/javascript">

    var ajaxFile='Ajax.php';
    Event.observe(window, 'load', function() {
        $('searchButton').observe('click',searchSong);
        
    });
    //****************************************//
    //****Processes search********************//
    //****************************************//
    function searchSong(event){
        var search=$('searchbar').value;
        //Ajax call to request the song
        /*new Ajax.Request(ajaxFile,{
            method:'post',
            parameters:{searchTerm:search},
            onSuccess:addSongsToResult
        });*/
        addSongsToResult(null);
    }
    function addSongsToResult(data){
        //eval data
        //var response=eval('('+data.responseText+')');
        //loop through all elements
        switchMiddle('results');
        
        //call suggested playlist
        addPlaylistsToResult(null);
    }
    function addPlaylistsToResult(data){
        //eval data
        switchMiddle('results');
    }
    //************************************//
    //functions for artist info, albums***//
    //************************************//
    function showArtistInfoR(element){
        //argument should be an element, with artistID
        var artistID=element.artistID;
        //request avatar, bio
        showArtistInfo(null);
    }
    function showArtistInfo(data){
        //eval data
        switchMiddle('artist');
    }
    function showArtistAlbumsR(element){
        //argument should be an element, with artistID
        var artistID=element.artistID;
        //request all albums
        showArtistAlbums(null);
    }
    function showArtistAlbums(data){
        //eval data
        switchMiddle('albums');
    }
    //************************************//
    //functions for album info, tracks****//
    //************************************//
    function showAlbumInfoR(element){
        //element should have artistID, albumID
        var artistID=element.artistID;
        var albumID=element.albumID;
        //Request all tracks, image and info of the album
        showAlbumInfo(null);
    }
    function showAlbumInfo(data){
        //eval data
        switchMiddle('album');
    }
    //************************************//
    //functions concerning tracks********//
    //************************************//
    function vote(stars){
        console.log(stars);
        //the element with id currentTrack should contain the track id, artist id and album id
        var trackID=$('player').trackID;
        //make ajax call
    }
    function next(){
        //the element with id currentNext should contain the track id, artist id and album id, with their names
        //Request youtube link
        nextPlay(null);
    }
    function nextPlay(data){
        //eval data
        //set currentTrack to this track
        //set currentArtist to the artist of this track
        //set currentAlbum to the album of this track
        //loop through all elements and get add music.gif to the element with trackID==this track
        //ask which track is next
        nextSet(null);
        //play the track, argument is the youtubeID
        //updateLink(null);
    }
    function nextSet(data){
        //eval data
        //set next track to this track
    }
    
    /**
     *this function is called when someone clicked on the track
     */
    function track(element){
        //check if this track is in the current play list, if no, set currentPlaylist to none, if yes ask ajax what the next song is going to be and call nextSet
        //ask ajax for youtube link and call nextPlay
        //set currentTrack to this
        //set currentArtist to the artist of this track
        //set currentAlbum to the album of this track
    }
    //************************************//
    //functions conerning playlist//
    //************************************//
    function removeTrack(element){
        //element should be the element that has to be removed, with a track id
        //loop through all elements, fetch their id, concat them like this: 23;44;1;133
        //give ajax the playlist that has been edited with the founded string (rule above ^)
        //remove the element
    }
    function addTrack(element,playlist){
        //element should be the element that has to be added, with track id
        //playlist should be an element with playlistID and playlistName
        //if playlist is the current playlist, add the element to the current playlist under id 'track'
        //if playlistID is NULL then this playlist is new, tell ajax this and tell ajax to add the track to the playlist, otherwise jsut add the track to the playlist
    }
    function showPlaylistsR(){
        //ask ajax for all the playlists
        showPlaylists(null);
    }
    function showPlaylists(data){
        //eval data
        switchMiddle('playlists');
    }
    //************************************//
    //statistics//
    //************************************//
    function showStatisticsR(){
        //ask ajax for global and user statistics
        showStatistics(null);
        //ask ajax for top 10 tracks of this user
        showTopTracks(null);
    }
    function showStatistics(data){
        //eval data
        switchMiddle('statistics');
    }
    function showTopTracks(data){
        //eval data,
        //dont switch to statistcs!
    }
    //************************************//
    //Switches, collaps, show functions   //
    //************************************//
    function switchMiddle(show){
        var elements=$$('#middle .wrapper');
        for(var i=0;i<elements.length;i++){
            if(elements[i].hasClassName('show')){
                elements[i].removeClassName('show');
                elements[i].addClassName('hide');
            }
            if(elements[i].id==show){
                elements[i].addClassName('show');
                elements[i].removeClassName('hide');
            }
        }
    }
    function switchStat(element){
        console.log(element.previous());
        if(element.hasClassName('link')){
            if(element.innerHTML=='Global'){
                element.toggleClassName('focus');
                $('globalStat').removeClassName('hide');
                $('globalStat').addClassName('show');
                $('userStat').removeClassName('show');
                $('userStat').addClassName('hide');
                element.next().addClassName('link');
                element.next().removeClassName('focus');
            }
            else{
                element.toggleClassName('focus');
                $('globalStat').removeClassName('show');
                $('globalStat').addClassName('hide');
                $('userStat').removeClassName('hide');
                $('userStat').addClassName('show');
                element.previous().addClassName('link');
                element.previous().removeClassName('focus');
            
            }
        }
    }
    
    function switchAlbumView(element){

        if(element.hasClassName('link')){
            if(element.innerHTML=='Show info'){
                element.toggleClassName('focus');
                $('albumInfo').removeClassName('hide');
                $('albumInfo').addClassName('show');
                $('albumTracks').removeClassName('show');
                $('albumTracks').addClassName('hide');
                element.next().next().addClassName('link');
                element.next().next().removeClassName('focus');
            }
            else{
                element.toggleClassName('focus');
                $('albumInfo').removeClassName('show');
                $('albumInfo').addClassName('hide');
                $('albumTracks').removeClassName('hide');
                $('albumTracks').addClassName('show');
                element.previous().previous().addClassName('link');
                element.previous().previous().removeClassName('focus');
            }
        }
    }
    function collapsText(element){
        element.removeClassName('show');
        element.addClassName('hide');
        
        element.previous().removeClassName('show');
        element.previous().addClassName('hide');
        element.previous().previous().removeClassName('hide');
        element.previous().previous().addClassName('show');
    }
    function showText(element){
        element.removeClassName('show');
        element.addClassName('hide');
        
        element.next().removeClassName('hide');
        element.next().addClassName('show');
        
        element.next().next().removeClassName('hide');
        element.next().next().addClassName('show');
    }
    function expand(element){
        var elements=element.parentNode.descendants();
        var show=false;
        for(var i=0;i<elements.length;i++){
            if(elements[i].hasClassName('hide')){
                show=true;
            }
        }
        for(var i=0;i<elements.length;i++){
            console.log(elements[i]);
            if(show && elements[i].hasClassName('hide')){
                elements[i].removeClassName('hide');
                elements[i].addClassName('show');
            }
            if(!show && elements[i].hasClassName('show')){
                elements[i].removeClassName('show');
                elements[i].addClassName('hide');
            }
        }
        element.toggleClassName('collaps');
    }
    //**********************************//
    //****Youtube functions*************//
    //**********************************//
    function updateLink(youtubeID){
        var link='http://www.youtube.com/embed/'+youtubeID;
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        $('ytplayer').youtubeID=data.youtubeID;
        
        var rating = $('rating');

        $('ytplayer').update();

        $('wrapperplayer').insert(rating);
        $('rating').setStyle({display:'block'});
    }

    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
           width:'550',
           height:'290',
          videoId: $('ytplayer').youtubeID,
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
        //tell ajax that a song is being played
    }

    function onPlayerStateChange(event) {
        if(event.data==0){
            console.log('next song please!');
        }
    }

    //*************************************//
    //creates loader//
    //*************************************//
    function createLoader(text){
        var node=new Element('span');
        node.addClassName('loading');
        var textNode=new Element('span');
        textNode.update(text);
        var picNode=new Element('img');
        picNode.setAttribute('src', 'ajax-loader.gif');
        node.insert(textNode);
        node.insert(picNode);
        return node;
    }
    //*************************************//
    //Additional functions//
    //*************************************//
    function shortText(text,size){
        if(text.length>=size){
            var out=text.substring(0,size);
            out+='...';
            return out;
        }
        return text;
    }

    function gup( name )
    {
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
        return "";
      else
        return results[1];
    }

    function nl2br_js(myString){
        return myString.replace( /\n/g, '<br />\n' );
    }
    /***************************************/
    /*popup*/
    /****************************************/
    /**
     *return the viewport of the window
     */
    function viewport()
    {
        var e = window
        , a = 'inner';
        if ( !( 'innerWidth' in window ) )
        {
        a = 'client';
        e = document.documentElement || document.body;
        }
        return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
    }
    /**
     *togles
     */
    function toggle(div_id) {
        var el=$(div_id);

	if ( el.getStyle('display') == 'none' ) {	el.setStyle({'display':'block'});}
	else {el.setStyle({'display':'none'});}
    }
    /**
     * sets the blanket size
     */
    function blanket_size(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px'; 
     }
     function window_pos(popUpDivVar) {
        var win=viewport();
        var popUpDiv = $(popUpDivVar);
        var top=(win.height/2)-parseInt(popUpDiv.getStyle('height'))/2;
        var left=(win.width/2)-parseInt(popUpDiv.getStyle('width'))/2;
        
       popUpDiv.setStyle({'top':top + 'px'});
        popUpDiv.setStyle({'left':left + 'px'});
        
      }
      function popup(windowname) {
            
            blanket_size(windowname);
            window_pos(windowname);
            toggle('blanket');
            toggle(windowname);	
     }
</script>
<title>IKE Music Player</title>
</head>

<body>
    <div id="blanket"></div><!-- dit zorgt er voor dat de hele pagina behalve de popup een lagere opacity krijgt-->
    
    <div id="loginDiv" class="popupt">
        <h3>Enter you username and password</h3>
            <form id="loginform" action="javascript:logIn();" method="post" name="contact_form" >
                        <input  type="text" name="user" placeholder="username" id="email"/>
                        <input type="password" name="pass" placeholder="password" id="password"/>
                        <button id="loginbutton" type="submit" >login</button>
            </form> 
        <div class="link" onclick="popup('loginDiv')">Close window</div>
    </div>
    
    <div id="selectPlaylist" class="popupt">
        <div id="styleSelectPlaylist">
            <h3>Select a playlist to add this track</h3>
            <select>
                <option>Awsome playlist</option>
                <option>Rock</option>
                <option>Mix club</option>
            </select>
            <hr/>
            <h3>Or create a new playlist</h3>
            <form>
                <input type="text" id="email"/>
                <button type="submit">Save</button>
            </form> 
        </div>
        <div class="link" onclick="popup('selectPlaylist')">Close window</div>
    </div>
    
    <div id="top">
        <div id="whitespace" style="width:40%;float:left;display:block;height:50px;"></div>
            <img src="logo.png" id="logo" />
          <div id="login">
                <span id="reg"><a href="reg.html">Register</a></span> <span id="reg"><a href="#" onclick="popup('loginDiv')">  Login</a></span><br/>
        </div>
    </div>

    <div id="blackbar">

        <form id="searchForm" action="javascript:getSongs();" method="post" name="contact_form">
              <input type="text" name="user" placeholder="Search for your song or artist" id="searchbar"/>
              <input type="button" id="searchButton" value="Go!"/>
        </form>
    </div>
    <div id='loading' style="height:20px;">
    </div>
    
    <div id="main">
        <div id="left">
            <div id="menu" class="wrapper">
                <div class="header">
                    <h2>MENU</h2>
                </div>
                <div class="content">
                    <ul>
                        <li onclick="switchMiddle('statistics');">Show statistics</li>
                        <li onclick="switchMiddle('playlists');">My playlists</li>
                        <li onclick="switchMiddle('results');">Results</li>
                    </ul>
                </div>
            </div>
            <div id="currentPlay" class="wrapper">
                <div class="header">
                    <h2>CURRENTLY PLAYING</h2>
                </div>
                <div class="content">
                        <span>Jedi Mind Tricks</span><br/>
                        <span>Servants in Heaven, Kings in Hell</span><br/>
                        <span>Heavy Metal Kings</span><br/><br/>
                        
                        Playlist:<br/>
                        <span>(Album) Servants in Heaven, Kings in hell</span> <br/> <br/>
                        Next songs: <br/>
                        <span>Uncommon Valor</span><br/>

                </div>
            </div>
        </div>
        <div id="middle">
            <div id="results" class="wrapper">
                <div class="header">
                    <h2>RESULTS</h2>
                </div>
                <div class="content">
                    <div id="resultResults">
                                        <ul>
                        
                        
                        
                        
                        
                        
                        
                        

                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Jedi Mind Tricks</span><span>Intro</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Jedi Mind Tricks</span><span>Heavy Metal Kings</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Jedi Mind Tricks</span><span>Blood In Blood Out</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Jedi Mind Tricks</span><span>Heavenly Divine</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Jedi Mind Tricks</span><span>Retaliation</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Jedi Mind Tricks</span><span>On The Eve of War On The Eve of War On The Eve of War</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Ill Bill</span><span>The Worst</span></li>
                        <li class="liTrack"><span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Ill Bill</span><span>Put em in the Grave</span></li>
                    </ul>
                    </div>
                    <hr style="width:80%;"/>
                    Suggested playlists
                    <div id="resultPlaylists">
                        <div class="playlist">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="playlistList">
                                <ul>
                                         <!-- dit is 1 li item -->      
                                <a 
                                   onmouseClick="ShowContent('uniquename2'); return true;"
                                   href="javascript:ShowContent('uniquename2')">
                                 <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                </a>
                                <div 
                                   id="uniquename2" 
                                   style="display:none; 
                                      position:absolute; 
                                      border: solid 1px black; 
                                      background-color: white; 
                                      padding: 5px;">
                                Select a playlist:<br/>
                                playlist hier<br/>
                                playlist hier<br/>
                                <a 
                                   onmouseClick="HideContent('uniquename2'); return true;"
                                   href="javascript:HideContent('uniquename2')">
                                [hide]
                                </a>
                                </div>
                                
                               <!-- einde 1 li item -->
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack hide" ><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <div class="expand" onclick="expand(this)">

                            </div>
                            <hr/>
                        </div>
                        <div class="playlist">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack hide" ><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <div class="expand" onclick="expand(this)">

                            </div>
                            <hr/>
                        </div>
                        <div class="playlist">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack hide" ><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <div class="expand" onclick="expand(this)">

                            </div>
                            <hr/>
                        </div>
                    </div>
                </div>
            </div>
            <div id="artist" class="wrapper">
                <div class="header">
                    <h2>ARTIST</h2>
                    
                    <div class="content">
                        <div class="bio">
                            <div class="artistLeft">
                                <img src="http://userserve-ak.last.fm/serve/500/35949911/Jedi+Mind+Tricks.jpg" id="artistAvatar" class="avatar"/>
                                <span class="link">Show albums</span>
                            </div>
                            <div id="artistBio">
                            Jedi Mind Tricks (JMT) is a hip hop group formed in 1996 with two members from Philadelphia, Pennsylvania and one from Camden, New Jersey. The group was founded by two high school friends rapper Vinnie Paz (Vincenzo Luvineri) and producer / DJ Stoupe the Enemy of Mankind (Kevin Baldwin). In 1999 the New Jersey rapper Jus Allah (James Bostick) joined the group to record the 2nd studio album by JMT, Violent by Design but left shortly after for reasons that remain unexplained. The track "The Rebuilding" (2006) marked his unofficial return to JMT since the split, but made a full fledged return aside Vinnie Paz for the 6th studio album, A History of Violence (2008).<br/>
                             <br/>
                             DJ Kwestion is also a part <span class="link" onclick="showText(this)">....Show more</span> <div class="hide"> of the group, mainly scratching choruses on the turntable. Kwestion (or Kwes) is also a part of the group Skratch Makaniks. Kwestion was a replacement for JMT''s previous tour DJ, Drew Dollars, who is no longer affiliated with the group.<br/>
                             <br/>
                             JMT has collaborations with both regional MCs and rap veterans, including GZA, Kool G Rap, 7L &amp; Esoteric, Sean Price, Ras Kass, Canibus, Percee P, Killah Priest, Louis Logic, R.A. the Rugged Man, Tragedy Khadafi, and Ill Bill. The group has sold 250,000 albums in the United States and 300,000 albums worldwide, all of which were released independently.<br/>
                             <br/>
                             <strong>History<br/>
                             <br/>
                             <br/>
                             Amber Probe EP and Psycho-Social LP</strong><br/>
                             <br/>
                             JMT officially debuted with the Amber Probe EP in 1996. The B-side of that EP was also included in their first LP, The Psycho-Social LP, which was released a year later. On this album Vinnie Paz called himself "Ikon the Verbal Hologram".<br/>
                             <br/>
                             The Psycho-Social LP was a concept album containing themes of conspiracy theories and ancient Middle-Eastern mythology. It also featured the recording debut of fellow Philadelphia rap-group Lost Children of Babylon and Connecticut''s Apathy on multiple songs. However, the Lost Children of Babylon soon parted ways with JMT, and in a 2001 interview member Cosmic Crusader cited that while Vinnie Paz had assured them that his cause was all for spiritual hip hop, he soon saw "that Vinnie Paz was not really spiritual at all, but only interested in tapping that fan base." In a later interview, member Rasul Allah stated that the group and JMT are on good terms. <br/>
                             <br/>
                             <strong>Five Perfect Exertions EP and Violent By Design</strong><br/>
                             <br/>
                             Prior to the release of their first LP, Vinnie Paz had conceived the idea of forming a rotating, collaborative super-group of underground East Coast artists called the Army of the Pharaohs (AotP).  1998 saw the first result of these efforts in The Five Perfect Exertions EP. The release featured Virtuoso, 7L &amp; Esoteric, Chief Kamachi and Bahamadia as well as Vinnie Paz himself. The EP was later remixed for JMT''s next LP, Violent by Design (2000), albeit without Chief Kamachi''s verse.<br/>
                             The LP, originally titled Nyugha Reincarnation of the Hologramic Christ, became seen as the group''s best work. Vinnie Paz became noticeably more aggressive, abandoning his cosmic, paranoid rhyme style from The Psycho-Social CD for more violent lyrics. The LP also introduced Jus Allah, a founding member of JMT who had left for college but dropped out a short while after. A self-proclaimed five-percenter, Jus was present on every non-AotP track on Violent by Design as JMT''s unofficial third member. Most of the lyrics in Violent By Design show Allah and Paz describing exaggerated ways of killing people as well as their metaphorical superhuman powers. Typically, they do this by combining themes of hardcore/gangsta rap with mythological or fantasy imagery. For example, on Genghis Kahn featuring Tragedy Khadafi, Allah rhymes: With a staff and white robe I still hold metal / Disciples who walk on glass and rose petals.<br/>
                             The list of guest artists on this album was also their longest, including Mr. Lif, Planetary of OuterSpace, Louis Logic, Diamondback, Philip King Rappah,Coffe Gangsta Child L-Fudge, B.A. Barakus, J-Treds, Killa Sha, C-Baz and Tragedy Khadafi, plus a couple of odd phone-call interludes by Mr. Len.<br/>
                             During the course of Violent by Design''s 1999-2000 recording period, Paz changed his alias to Vinnie Paz, inspired by the boxer of the same name. The reason for this has been reported to be the result of a short-lived rivalry instigated by fellow Philly underground rapper iCON the Mic King. Vinnie Paz decided to settle on his new moniker in order to prevent any further confusion. It was also around this time that he formally declared himself to be a follower of Islam, alluding to this fact several times on record.<br/>
                             <br/>
                             <strong>Visions of Gandhi</strong><br/>
                             <br/>
                             In late 2001, JMT was made an offer by Babygrande Records founder Chuck Wilson to sign a deal. Jus Allah''s uncertainty caused him to leave the group on good terms. Stoupe and Vinnie Paz closed their homegrown Superegular label and migrated to Babygrande. Before his White Nightmare EP on Virtuoso''s "Omnipotent Records" label, Jus was somewhat isolated from the entire Philadelphia underground scene; the two sides wouldn''t talk to each other for over three years. Virtuoso was also estranged from JMT and AoTP for his support of Jus, among other reasons.<br/>
                             Mid-2003 saw the release of JMT''s third LP, Visions of Gandhi. In an interview, Vinnie Paz said the title was inspired by Foxy Brown''s verse in Nas''s song "Affirmative Action", and expresses the need for a prominent figure of non-violent social change such as Gandhi in a post-9/11 world.<br/>
                             Stoupe, now supplied with a professional studio in New York, also expanded his variety of production, incorporating grand orchestral samples and a stronger Latino feel. In response, some Template:Weazel longtime fans felt let down by Vinnie Paz''s lyricism and delivery, as well as the abundance of slick, upbeat loops adopted by Stoupe. Nevertheless, the album helped expand the group''s audience as its popularity and commercial success continued to grow.<br/>
                             <br/>
                             <strong>Legacy of Blood and Servants in Heaven, Kings in Hell</strong><br/>
                             <br/>
                             A little over a year later, JMT continued their creative streak with Legacy of Blood, this time intentionally keeping guest artists to a minimum. Carrying with them their lessons from Gandhi, Stoupe and Vinnie tried to strike a balance between the past two albums. Vinnie Paz also added a more personal aspect to his lyrics, most notably in the last song "Before the Great Collapse".<br/>
                             In February, 2005, Babygrande officially announced that Jus Allah had signed on to the label after reconciling with his former partners. Babygrande released his long-awaited debut LP, All Fates Have Changed, in May of that year. However, after a dispute with label CEO Chuck Wilson soon after the album''s release, Jus left Babygrande and denied any new association with JMT.<br/>
                             In March, 2006, a reunited Army of the Pharaohs released The Torture Papers LP. The crew now consisted of Vinnie Paz, Chief Kamachi, 7L &amp; Esoteric, Apathy, Celph Titled, Planetary &amp; Crypt the Warchild of Outerspace, King Syze, Faez One, Reef the Lost Cauze, and new Jedi Mind Tricks hype-man Des Devious. This time, however, Virtuoso and Bahamadia were not featured and are no longer associated with the Army.<br/>
                             The fifth Jedi Mind Tricks album, titled Servants in Heaven, Kings in Hell, was released on September 19th, 2006. The release coincided with the beginning of the album''s supportive tour, which kicked off in New York City''s Time Square. The album was widely acclaimed, unlike the group''s two previous albums, which both received mixed reviews. A large part of the acclaim was due to the album''s lyrical and musical diversity, both missing from their previous efforts. The album featured the single "Heavy Metal Kings" with Ill Bill, the Shara Worden-assisted "Razorblade Salvation", and the storytelling track "Uncommon Valor: A Vietnam Story" with R.A. The Rugged Man. A day after the release of the album, Vinnie Paz of Jedi Mind Tricks did an interview with The Breakdown, a show on ItsHipHop.tv where he discussed the album and his thoughts on Jus Allah.<br/>
                             In early 2006, rumors spread that the group had reunited with estranged member Jus Allah, and that he would be featured on Servants in Heaven, Kings in Hell, but no collaboration appeared. However, on September 20, 2006 a newly-recorded Jedi Mind Tricks/Jus Allah collaboration titled "The Rebuilding" appeared online. Jus is also planning to release his second album, The Colossus, in the summer of 2007. In a January 2007 interview Paz stated that Jus will be featured on the group''s upcoming sixth album, titled A History of Violence. Jus Allah, Doap Nixon and Demoz were added to the AotP roster in 2007, and will contribute verses to the group''s second studio album Ritual of Battle, scheduled for release on September 25, 2007. Also, in summer 2008, Jedi Mind Tricks'' Label, Babygrande, will be releasing a JMT DVD. "With a 12+ year career under their belt and a continually growing rabid fan base, the history of Jedi Mind Tricks has never been officially documented…until now. This summer (2008), “Divine Fire: The Story of Jedi Mind Tricks DVD,” promises an insightful excursion into the roots of an underground empire." This is from Babygrande''s Newsletter.<br/>
                             <br/>
                             <strong>Reunion with Jus Allah</strong><br/>
                             <br/>
                             In an interview conducted in September 2007 on the Art of Rhyme website, Jus Allah announced that he has rejoined Jedi Mind Tricks. In the interview he states that "I''m back in the group [and that] I''m focused on... putting out the next Jedi Mind Tricks album... a History of Violence." In addition, he says that he has rejoined Babygrande and that the entire "All Fates Have Changed" fiasco has been put in the past and was in large part a misunderstanding. Babygrande will also be releasing Jus Allah''s next solo album, The Colossus.<br/>
                                <br/>
                            User-contributed text is available under the Creative Commons By-SA License and may also be available under the GNU FDL.</div><span class="link hide" onclick="collapsText(this)"><br/>Collaps</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="albums" class="wrapper">
                <div class="header">
                    <h2>ALBUMS</h2>
                    <div class="content" id="albumsContent">
                        <div class="albumsItem">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="albumLeft">
                                <img src="http://userserve-ak.last.fm/serve/500/35949911/Jedi+Mind+Tricks.jpg" class="avatar"/>
                                <span class="link">Show info</span>
                            </div>
                            
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <hr/>
                        </div>
                                                <div class="albumsItem">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="albumLeft">
                                <img src="http://userserve-ak.last.fm/serve/500/35949911/Jedi+Mind+Tricks.jpg" class="avatar"/>
                                <span class="link">Show info</span>
                            </div>
                            
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <hr/>
                        </div>
                                                <div class="albumsItem">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="albumLeft">
                                <img src="http://userserve-ak.last.fm/serve/500/35949911/Jedi+Mind+Tricks.jpg" class="avatar"/>
                                <span class="link">Show info</span>
                            </div>
                            
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <hr/>
                        </div>
                        <div class="albumsItem">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="albumLeft">
                                <img src="http://userserve-ak.last.fm/serve/500/35949911/Jedi+Mind+Tricks.jpg" class="avatar"/>
                                <span class="link">Show info</span>
                            </div>
                            
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <hr/>
                        </div>
                        <div class="albumsItem">
                            <h3>(Album) Violence Begets Violence</h3>
                            <div class="albumLeft">
                                <img src="http://userserve-ak.last.fm/serve/500/35949911/Jedi+Mind+Tricks.jpg" class="avatar"/>
                                <span class="link">Show info</span>
                            </div>
                            
                            <div class="playlistList">
                                <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                            <hr/>
                        </div>
                    </div>
                </div>
            </div>
            <div id="album" class="wrapper">
                <div class="header">
                    <h2>ALBUM</h2>
                </div>
                <div class="content">
                        <div class="bio">
                            <div class="artistLeft">
                                <p><img src="http://upload.wikimedia.org/wikipedia/en/2/24/Servantsinheavenkingsinhell.jpg" class="avatar"/></p>
                                <span class="focus" onclick="switchAlbumView(this)">Show info</span><br/>
                                <span class="link" onclick="switchAlbumView(this)">Show tracks</span>
                            </div>
                            <div id="albumInfo" class="show">
                            <p><i><b>Servants in Heaven, Kings in Hell</b></i> is the fifth studio album by <a href="/wiki/Hip_hop_music" title="Hip hop music">hip hop</a> group <a href="/wiki/Jedi_Mind_Tricks" title="Jedi Mind Tricks">Jedi Mind Tricks</a>. It was released September 19, 2006 through <a href="/wiki/Babygrande_Records" title="Babygrande Records">Babygrande Records</a>. The first single, "<a href="/wiki/Heavy_Metal_Kings" title="Heavy Metal Kings">Heavy Metal Kings</a>", featuring <a href="/wiki/Ill_Bill" title="Ill Bill">Ill Bill</a> of <a href="/wiki/La_Coka_Nostra" title="La Coka Nostra">La Coka Nostra</a>, was released in early August through <a href="/wiki/ITunes" title="ITunes">iTunes</a> and a limited edition vinyl pressing. Additional guest appearances on the album are provided by <a href="/wiki/Shara_Worden" title="Shara Worden">Shara Worden</a> of <a href="/wiki/My_Brightest_Diamond" title="My Brightest Diamond">My Brightest Diamond</a>, <a href="/wiki/Sean_Price" title="Sean Price">Sean Price</a>, <a href="/wiki/R.A._the_Rugged_Man" title="R.A. the Rugged Man">R.A. the Rugged Man</a>, Block McCloud and <a href="/wiki/Army_of_the_Pharaohs" title="Army of the Pharaohs">Army of the Pharaohs</a> members Chief Kamachi and Reef the Lost Cauze.</p>
                            <span class="link" onclick="showText(this)">....Show more</span> <div class="hide">
                            <p>As with previous Jedi Mind Tricks albums, many of the track titles appear to be lifted from previous songs by heavy metal groups. For example, "When All Light Dies" was previously the title of a song by <a href="/wiki/Trivium_(band)" title="Trivium (band)">Trivium</a>; "Serenity in Murder" is also the name of a <a href="/wiki/Slayer" title="Slayer">Slayer</a> track; "Razorblade Salvation" is also a song by <a href="/wiki/Sinergy" title="Sinergy">Sinergy</a>; and "Black Winter Day" is the name of a track by <a href="/wiki/Amorphis" title="Amorphis">Amorphis</a>. The album title, as well, could potentially be a reference to the <a href="/wiki/Kreator" title="Kreator">Kreator</a> track "Servant in Heaven (King in Hell)" from their <i><a href="/wiki/Violent_Revolution" title="Violent Revolution">Violent Revolution</a></i> album.</p>
                            <p><i>Servants in Heaven</i> became the group's most commercially successful release, being their first album to break into the <a href="/wiki/Billboard_200" title="Billboard 200"><i>Billboard</i> 200</a>, and also landed in the top ten on the <a href="/wiki/Independent_Albums" title="Independent Albums">Independent Albums</a> chart, and the top fifty on the <a href="/wiki/Top_R%26B/Hip_Hop_Albums" title="Top R&amp;B/Hip Hop Albums" class="mw-redirect">Top R&amp;B/Hip Hop Albums</a> chart. The album was warmly received critically, especially when compared to their two previous efforts, <i><a href="/wiki/Visions_of_Gandhi" title="Visions of Gandhi">Visions of Gandhi</a></i> and <i><a href="/wiki/Legacy_of_Blood" title="Legacy of Blood">Legacy of Blood</a></i>, which both received mixed reviews. <a href="/wiki/Allmusic" title="Allmusic">Allmusic</a> gave the album a positive four star rating; writer Marisa Brown stated:</p>
                            <blockquote class="templatequote">
                            <div>Like how Wu-Tang appealed to so many different fans because of both their hard, urban beats and their smart, complex lyrics, so too are Jedi Mind Tricks able to achieve that same status. Stoupe's production is heavy yet musical, and Paz's rhymes are intelligent yet accessible, his voice rough yet his delivery smooth. Servants in Heaven, Kings in Hell is the collaboration of two talented musicians who can create a nearly flawless album in which each track can stand on its own, but is more powerful as a whole, as an exploration of pain and hatred, of those feelings that we often don't wish to address but that, thanks to Jedi Mind Tricks, will be addressed for us.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span>[</span>9<span>]</span></a></sup></div>
                            </blockquote>
                            <p>An exclusive version of the album was released at <a href="/wiki/Trans_World_Entertainment" title="Trans World Entertainment">Trans World Entertainment</a> chain stores. This version features three bonus tracks, a remixed version of "Heavy Metal Kings", performed with <a href="/wiki/California" title="California">California</a> hardcore band <a href="/wiki/Terror_(band)" title="Terror (band)">Terror</a>, the D-Tension mixtape track "Pretty Little Whores", featuring <a href="/wiki/Outerspace" title="Outerspace" class="mw-redirect">Outerspace</a>, and "Blitz Inc.", featuring <a href="/wiki/King_Syze" title="King Syze" class="mw-redirect">King Syze</a> and <a href="/wiki/7L_%26_Esoteric" title="7L &amp; Esoteric">Esoteric</a>, as well as a bonus <a href="/wiki/DVD" title="DVD">DVD</a>, featuring the "Heavy Metal Kings" music video.<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span>[</span>10<span>]</span></a></sup></p>
                            </div><span class="link hide" onclick="collapsText(this)"><br/>Collaps</span>
                            </div>
                            <div id="albumTracks" class="hide">
                                 <ul>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                        </div>
                </div>
            </div>
            <div id="playlists" class="wrapper">
                <div class="header">
                    <h2>PLAYLISTS</h2>
                    
                </div>
                <div class="content">
                    <div class="playlist">
                        <h3>(Album) Violence Begets Violence</h3>
                        <div class="playlistList">
                            <ul>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Intro</li>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Burning the Mirror</li>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>When Crows Descend Upon You</li>
                                <li class="liTrack hide" ><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>F**k Ya life</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Imperial Tyranny</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Design in Malic</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Weapon of Uholy Wrath</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Target Practice</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Carnival of Souls</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Willing a Destruction onto Humanity</li>
                            </ul>
                        </div>
                        <div class="expand" onclick="expand(this)">

                        </div>
                        <hr/>
                    </div>
                    <div class="playlist">
                        <h3>(Album) Violence Begets Violence</h3>
                        <div class="playlistList">
                            <ul>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Intro</li>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Burning the Mirror</li>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>When Crows Descend Upon You</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>F**k Ya life</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Imperial Tyranny</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Design in Malic</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Weapon of Uholy Wrath</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Target Practice</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Carnival of Souls</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Willing a Destruction onto Humanity</li>
                            </ul>
                        </div>
                        <div class="expand" onclick="expand(this)">

                        </div>
                        <hr/>
                    </div>
                    <div class="playlist">
                        <h3>(Album) Violence Begets Violence</h3>
                        <div class="playlistList">
                            <ul>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Intro</li>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Burning the Mirror</li>
                                <li class="liTrack"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>When Crows Descend Upon You</li>
                                <li class="liTrack hide" ><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>F**k Ya life</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Imperial Tyranny</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Design in Malic</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Weapon of Uholy Wrath</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Target Practice</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Carnival of Souls</li>
                                <li class="liTrack hide"><img src="playIcon.png"/><img src="expand-icon-minus.gif"/>Willing a Destruction onto Humanity</li>
                            </ul>
                        </div>
                        <div class="expand" onclick="expand(this)">

                        </div>
                        <hr/>
                    </div>
                </div>
            </div>
            <div id="track" class="wrapper">
                <div class="header">
                    <h2>TRACK</h2>
                </div>
                <div class="content">
                    <iframe src="http://www.youtube.com/embed/QDRFmpyCt-I" height="290" width="550"></iframe>
                    
                    <div id="stars">
                        <span>Rate It!</span><br/>
                         <ul class='star-rating'>
                             <li class='current-rating' id='current-rating'></li>
                             <li><a href="#" onclick="vote(1); return false;"
                                 title='1 star out of 5' class='one-star'>1</a></li>
                             <li><a href="#" onclick="vote(2); return false;"
                                 title='2 star out of 5' class='two-stars'>2</a></li>
                             <li><a href="#" onclick="vote(3); return false;"
                                 title='3 star out of 5' class='three-stars'>3</a></li>
                             <li><a href="#" onclick="vote(4); return false;"
                                 title='4 star out of 5' class='four-stars'>4</a></li>
                             <li><a href="#" onclick="vote(5); return false;"
                                 title='5 star out of 5' class='five-stars'>5</a></li>
                         </ul>
                         <div id='current-rating-result' width="100px"></div>
                    </div>
                    <span class="link" id="nextSong">Next song</span>
                    <hr/>
                    Current playlist
                    <div class="playlistList">
                                 <ul>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Intro</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Burning the Mirror</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - When Crows Descend Upon You</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - F**k Ya life</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Imperial Tyranny</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Design in Malic</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Weapon of Uholy Wrath</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Target Practice</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Carnival of Souls</li>
                                    <li class="liTrack"><img src="playIcon.png"/>Jedi Mind Tricks - Willing a Destruction onto Humanity</li>
                                </ul>
                            </div>
                </div>
            </div>
            <div id="statistics" class="wrapper">
                <div class="header">
                    <h2>STATISTICS</h2>
                </div>
                <div class="content">
                    <div class="title"><span class="focus" onclick="switchStat(this)">Global</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="link" onclick="switchStat(this)">Yours</span></div>
                
                <hr/>
                <div id="globalStat" class="show">
                <ul class="genres">
                    <li>Genre1</li>
                    <li>Genre2</li>
                    <li>Genre3</li>
                    <li>Genre4</li>
                    <li>Genre5</li>     
                    <li>Genre6</li>
                    <li>Genre7</li>
                    <li>Genre8</li>
                </ul>
                <ul class="statBar">
                    <li style="width:400px;">&nbsp;</li>
                    <li style="width:360px;">&nbsp;</li>
                    <li style="width:300px;">&nbsp;</li>
                    <li style="width:240px;">&nbsp;</li>
                    <li style="width:100px;">&nbsp;</li>
                    <li style="width:90px;">&nbsp;</li>
                    <li style="width:50px;">&nbsp;</li>
                    <li style="width:4px;">&nbsp;</li>
                </ul><br/>
                <span id="statisticsInfo">The statistics that you see above, gives an overview what kinda genre the users on this site listen to.</span>
                </div>
                <div id="userStat" class="hide" >
                  <ul class="genres">
                    <li>Genre1</li>
                    <li>Genre2</li>
                    <li>Genre3</li>
                    <li>Genre4</li>
                    <li>Genre5</li>     
                    <li>Genre6</li>
                    <li>Genre7</li>
                    <li>Genre8</li>
                </ul>
                <ul class="statBar">
                    <li style="width:400px;">&nbsp;</li>
                    <li style="width:310px;">&nbsp;</li>
                    <li style="width:100px;">&nbsp;</li>
                    <li style="width:90px;">&nbsp;</li>
                    <li style="width:80px;">&nbsp;</li>
                    <li style="width:50px;">&nbsp;</li>
                    <li style="width:10px;">&nbsp;</li>
                    <li style="width:4px;">&nbsp;</li>
                </ul><br/>
                <span id="statisticsInfo">The statistics that you see above, gives an overview what kinda genre the you listen to.</span>  
                <hr/>
                <h3>Your top 10 rated tracks!</h3>
                <ul>
                        
                        
                        
                        
                        
                        
                        
                        

                        <li class="liTrack"><span>Jedi Mind Tricks</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Intro</li>
                        <li class="liTrack"><span>Jedi Mind Tricks</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Heavy Metal Kings<img src="music.png"/></li>
                        <li class="liTrack"><span>Jedi Mind Tricks</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Blood In Blood Out</li>
                        <li class="liTrack"><span>Jedi Mind Tricks</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Heavenly Divine</li>
                        <li class="liTrack"><span>Jedi Mind Tricks</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Retaliation</li>
                        <li class="liTrack"><span>Jedi Mind Tricks</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>On The Eve of War</li>
                        <li class="liTrack"><span>Ill Bill</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>The Worst</li>
                        <li class="liTrack"><span>Ill Bill</span><img src="playIcon.png"/><img src="expand-icon-plus.gif"/>Put em in the Grave</li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
        <div id="right">
        </div>
            
    </div>

    <div id="bottom">
        <span>&copy;2011 VINCENT, POUJA AND PING <a style="display:inline;" href="about.html">About</a></span>
    </div>
</body>
</html>
